@import './style-var.scss';
@media all and (max-width:800px) {
  table {
    width: 100%;
  }



  div.markdown-header {
    padding-left: $font-size-l1;
    margin: 0;
    a.catalog-btn {
      display: block;
    }
    div.document-info {
      // 取消绝对定位，文件信息位置变成在标题下面
      line-height: 1em;
      .info-key,
      .info-value a {
        font-size: 14px;
      }
      bottom: 1px;
    }
  }
  div.markdown2html {
    bottom: 0;
    // catalog 切换动画
    // 屏幕大于800px的时候不使用切换动画
    .slide-leave-active,
    .slide-enter-active {
      transition: transform .5s;
    }
    .slide-enter,
    .slide-leave-active {
      transform: translateX( - $catolog-width)
    }
    // ---导出html 所用css 开始----
    div.markdown-catalog .catalog-hide {
      transform: translateX(-220px)
    }
    div.markdown-catalog .catalog-show {
      transform: translateX(0px)
    }
    // ---导出html 所用css 结束----
    // markdown-catalog 与 markdown-html 分隔线
    .med-line {
      display: none;
    }
    // 目录隐藏，去除margin
    .markdown-html {
      margin: 0;
    }
    // z-index大于
    .markdown-catalog {
      z-index: 1000;
      background: $catalog-bgcolor;
      left: 0;
      border: none;
      a {
        color: #ccc;
        &:hover {
          color: #fff!important;
        }
      }
    }
  }
}

// ——————————————————————————————————————————————————————
// 屏幕小于500px,输入框的高度
// $markdown-input 桌面端小于500px时的高度设置
$textarea-height: 220px;
$markdown-option-height: 30px;
$textarea-height-rem: pxTOrem($textarea-height);
$markdown-option-height-rem: pxTOrem($markdown-option-height);
@media screen and (max-width: 440px) {
  div.markdown-header {
    margin: 0;
    padding-left: $font-size-l2-rem *2;
    height: $header-height-rem;
    .catalog-btn {
      position: absolute;
      left: .4em;
      line-height: $header-height-rem;
      font-size: $font-size-l3-rem;
    }
    .made-by {
      top: auto;
      bottom: -.24rem;
    }
    .document-title,
    .title-icon {
      font-size: $font-size-l2-rem;
      line-height: $header-height-rem * .6;
      padding-left: 0;
    }
    .document-header.noFileInfo {
      .document-title{
        font-size: $font-size-l1-rem;
      line-height: $header-height-rem;
      }
    }
    div.document-info {
      // 取消绝对定位，文件信息位置变成在标题下面
      position: static;
      text-align: left;
      line-height: $font-size-sm-rem;
      .info-key,
      .info-value a {
        font-size: $font-size-sm-rem;
      }
    }
  }
  div.markdown2html {
    top: $header-height-rem + $separation-rem / 2;
    // 文本域高度和操作栏高度
    // 这只是pc端,使用px，固定不变
    // 移动端需要用js判断（在App.vue)
    bottom: $textarea-height + $markdown-option-height;
    .markdown-html {
      border-bottom: 0px solid;
    }
    .markdown-catalog {
      border: none;
    }
    // 屏幕小于500px的时候标题字体减小
    // 因为markdown-catalog 隐藏
    .markdown-html {
      margin: 0;
      h1 a.title {
        font-size: $font-size-l2;
      }
      h2 a.title {
        font-size: $font-size-l3;
      }
      h3 a.title {
        font-size: $font-size-l4;
      }
      h4 a.title {
        font-size: $font-size-l5;
      }
      h5 a.title {
        font-size: $font-size-sm;
      }
    }
  }
}
